<!DOCTYPE html>
<html>
<head>
    <title>Using Ajax to submit data</title>

    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css" media="screen"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
    <link rel="stylesheet" href="../font-awesome-4.6.3/css/font-awesome.min.css"/>

    <link rel="stylesheet" href="../bootstrap-datetimepicker-master_keyong/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" media="screen"/>


   
 <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js" charset="UTF-8"></script>

 <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    

 
    <!--<script type="text/javascript" src="../moment.js"></script>-->


<!-- 定义图表的颜色 -->
<style type="text/css">
.has-error .form-control-feedback {
    color: #E74C3C;
}
.has-success .form-control-feedback {
    color: #18BCA0;
}
.form-horizontal .has-feedback .form-control-feedback {
    top: 0;
    right: -20px;
}

</style>
</head>
<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>


   <script type="text/javascript" src="../bootstrap-datetimepicker-master_keyong/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>

    <script type="text/javascript" src="../bootstrap-datetimepicker-master_keyong/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        language:  'zh-CN',
        format: 'yyyy-mm-dd',       
        // locale: 'zh_CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1

    });
    $('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });
</script>

<br>    
<br>    
<br>    
<br>    
<br>    
<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker({
             language:  'zh-CN',
             autoclose:true,//日期选择完成后是否关闭选择框
        });
        $('#datetimepicker7').datetimepicker({
             language:  'zh-CN',
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

 <input id="birthdayInput" value="2016-09-14">
<script type="text/javascript">
  // $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
   $('#birthdayInput').datetimepicker({
   language:  'zh-CN',
   format: 'yyyy-mm-dd hh:ii',//日期的格式
   startDate:'1900-01-01',//选择器的开始日期
   autoclose:true,//日期选择完成后是否关闭选择框
   bootcssVer:3,//显示向左向右的箭头 
   minView: "month",//表示日期选择的最小范围，默认是hour
});
</script> 



<br>    
<br>    
<br>    
111
<div class="container">
    <div class="col-sm-6" style="height:130px;">
        <div class="form-group">
            <div class='input-group date' id='datetimepicker8'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="fa fa-calendar">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker8').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    </script>
</div>
<br>
<br>
<br>
<br>




<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({                    
                    language:  'zh-CN',
                });
            });
        </script>
    </div>
</div>




<form id="latlongForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Latitude</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="latitude" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-3 control-label">Longitude</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="longitude" />
        </div>
    </div>

 

      <div class="form-group">        
        <div class="col-lg-9 col-lg-offset-3">
           <button type="submit" class="btn btn-primary" disabled="disabled">Sign up</button>
        </div>
    </div>
   
</form>
 <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
<script>
$(document).ready(function() {
    $('#latlongForm').bootstrapValidator({
        message: 'This value is not valid',
         //live: 'enabled',
         //submitButtons: 'button[type="submit"]',
        feedbackIcons: {   //可以使用Bootstrap自带的图标也可以使用font-awesome图标
            /*valid: 'fa fa-flask',   
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'*/
            valid: 'glyphicon glyphicon-ok-circle',   
            invalid: 'glyphicon glyphicon-remove-circle',
            validating: 'fa fa-refresh'
        },
        fields: {
            latitude: {
                validators: {
                    between: {
                        min: -90,
                        max: 90,
                        message: '纬度必须在-90~90之间'
                    }
                }
            },
            longitude: {
                validators: {
                    between: {
                        min: -180,
                        max: 180,
                        message: '纬度必须在-180~180之间'
                    }
                }
            }
        },
         // 还有一个比较常用的就是submitHandler属性，它对应着提交按钮的事件方法。
            //  submitHandler: function (validator, form, submitButton) {
            //     return false;
            //     alert("submit");
            // }
    });
});
</script>
</body>
</html>
